/**
 * Created by Administrator on 2018/4/16 0016.
 */

import config from '../../../../../config/config.js'

// components
import Icon from '../../../../basic/icon/index.vue'
import DateTable from '../../base/date-table.vue'
import YearTable from '../../base/year-table.vue'
import MonthTable from '../../base/month-table.vue'
import TimePicker from '../time/time.vue'
import Confirm from '../../base/confirm.vue'
import datePanelLabel from './date-panel-label.vue'

import Mixin from '../panel-mixin'
import DateMixin from './date-panel-mixin'

// mixins
import Locale from '../../../../../mixins/locale.js'

import { siblingMonth, formatDateLabels } from '../../util'

const prefixCls = config.prefix + '-picker-panel'
const datePrefixCls = config.prefix + '-date-picker'

export default {
  name: 'DatePickerPanel',
  mixins: [Mixin, Locale, DateMixin],
  components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
  props: {
    // more props in the mixin
    multiple: {
      type: Boolean,
      default: false
    },
    isTimestamp: Boolean,
  },
  data () {
    const { selectionMode, value } = this
    let timeStamp = this.startDate
    if (this.isTimestamp && this.startDate && Artery.type(this.startDate) === 'number') {
      timeStamp = new Date(this.startDate)
    }
    const dates = value.slice().sort()
    return {
      prefixCls: prefixCls,
      datePrefixCls: datePrefixCls,
      currentView: selectionMode || 'date',
      pickerTable: this.getTableType(selectionMode),
      dates: dates,
      panelDate: timeStamp || dates[0] || new Date()
    }
  },
  computed: {
    classes () {
      return [
                `${prefixCls}-body-wrapper`,
                {
                  [`${prefixCls}-with-sidebar`]: this.shortcuts.length
                }
      ]
    },
    panelPickerHandlers () {
      return this.pickerTable === `${this.currentView}-table` ? this.handlePick : this.handlePreSelection
    },
    datePanelLabel () {
      const locale = this.t('i.locale')
      const datePanelLabel = this.t('i.datepicker.datePanelLabel')
      const date = this.panelDate
      const { labels, separator } = formatDateLabels(locale, datePanelLabel, date)

      const handler = type => {
        return () => this.pickerTable = this.getTableType(type)
      }

      return {
        separator: separator,
        labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
      }
    },
    timeDisabled () {
      return !this.dates[0]
    }
  },
  watch: {
    value (newVal) {
      this.dates = newVal
      const date = this.startDate || (this.multiple ? this.dates[this.dates.length - 1] : this.dates[0]) || new Date()
      if (this.isTimestamp && Artery.type(date) === 'number') {
        this.panelDate = new Date(date)
      } else {
        this.panelDate = date
      }
    },
    currentView (currentView) {
      this.$emit('on-selection-mode-change', currentView)
      this.pickertable = this.getTableType(currentView)
    },
    selectionMode (type) {
      this.currentView = type
      this.pickerTable = this.getTableType(type)
    }
  },
  methods: {
    reset () {
      this.currentView = this.selectionMode
      this.pickerTable = this.getTableType(this.currentView)
    },
    changeYear (dir) {
      if (this.selectionMode === 'year' || this.pickerTable === 'year-table') {
        this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1)
      } else {
        this.panelDate = siblingMonth(this.panelDate, dir * 12)
      }
    },
    getTableType (currentView) {
      return currentView.match(/^time/) ? 'time-picker' : `${currentView}-table`
    },
    changeMonth (dir) {
      this.panelDate = siblingMonth(this.panelDate, dir)
    },
    handlePreSelection (value) {
      this.panelDate = value
      if (this.pickerTable === 'year-table') this.pickerTable = 'month-table'
      else this.pickerTable = this.getTableType(this.currentView)
    },
    handlePick (value) {
      const { selectionMode, panelDate } = this
      if (selectionMode === 'year') value = new Date(value.getFullYear(), 0, 1)
      else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1)
      else value = new Date(value)

      this.$emit('on-pick', value)
    }
  }
}
